<template>
   <el-row v-if="!isViewShow" class="permission">
    没有权限!
  </el-row>
    <el-row v-else id="cpts-energyBusiness">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>经营指标</span>
          <el-button :disabled="!isViewEdit" style="float: right; padding: 6px 6px;" type="primary" @click="openAddDialog()">添加<i class="el-icon-plus el-icon--right"></i></el-button>
        </div>

        <el-collapse v-model="activeName" accordion >
          <el-collapse-item :name="item.id" v-for="item in dataItems">
            <template slot="title">
              <el-row style="width: 100%">
                <el-col :span="22">
                  <span>{{item.name}}({{item.code}} )</span>
                </el-col>
                <el-col :span="2">
                  <el-button :disabled="!isViewEdit" style="padding: 6px 6px;" type="primary" @click.stop="openSettingDialog(item)">配置
                    <i class="el-icon-setting el-icon--right"></i></el-button>
                  <el-button :disabled="!isViewEdit" style="padding: 6px 6px;" type="danger" @click.stop="deleteFather(item.id,'',item.isBinding)">删除
                    <i class="el-icon-delete el-icon--right"></i></el-button>
                </el-col>
              </el-row>
            </template>
            <el-table
              maxHeight="300"
              :data="item.subitems"
              :show-header="isShowHeader"
              stripe
              style="width: 100%">
              <el-table-column
                align="center"
                prop="name"
                label="分项">
              </el-table-column>
              <el-table-column
                align="center"
                prop="code"
                label="分项编码">
              </el-table-column>
            <!--  <el-table-column
                :formatter="statusFormatter"
                align="center"
                prop="isBinding"
                label="状态">
              </el-table-column>-->
              <el-table-column label="操作"  align="right">
                <template slot-scope="scope">
                  <el-button :disabled="!isViewEdit"
                    size="mini"
                    @click="handleEditChild(scope.$index, scope.row)">编辑</el-button>
                  <el-button :disabled="!isViewEdit"
                    size="mini"
                    type="danger"
                    @click="deleteChild(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </el-card>

      <!--弹窗-->
      <el-dialog :visible.sync="addDialogShow">

        <el-row slot="title">
          <span style="font-size: 18px">添加/配置</span>  <el-button @click="handleAddSubmit('ruleForm')" style="margin-left: 760px; padding: 6px 10px"type="primary"  :loading="false">提交</el-button>
        </el-row>

        <el-form :model="ruleForm" ref="ruleForm" :rules="rules"  label-width="100px">

          <el-row>
            <el-col :span="8">
              <el-form-item label="能源分类" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分类编码" prop="classificationCode">
                <el-input v-model="ruleForm.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row><hr>

          <el-row class="evc-dialog-itemize">
            <el-row class="clearfix">
              <span style="font-size: 18px">分项配置</span>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="能源分项">
                  <el-input v-model="itemForm.name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分项编码">
                  <el-input v-model="itemForm.code"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-button style="padding: 12px 6px;margin-left: 20px" type="primary" @click="addTableItems">添加<i class="el-icon-plus el-icon--right"></i></el-button>
              </el-col>
            </el-row>

            <el-table
              :data="ruleForm.subitems"
              stripe
              max-height="260"
              style="width: 100%">
              <el-table-column
                align="center"
                prop="name"
                label="分项">
              </el-table-column>
              <el-table-column
                align="center"
                prop="code"
                label="分项编码">
              </el-table-column>
              <el-table-column v-if="isShowDelete" label="操作"  align="right">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteTableItem(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
         <!--   <el-row class="evc-submit-layout">
              <el-button @click="submit('ruleForm')" type="primary" :loading="false">提交</el-button>
            </el-row>-->
          </el-row>
        </el-form>
      </el-dialog>

      <el-dialog title="编辑" :visible.sync="editDialogShow">
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="能源分项">
                <el-input v-model="editDialogDatas.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="分项编码">
                <el-input v-model="editDialogDatas.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="evc-submit-layout">
            <el-button @click="handlerItemSubmit" type="primary" :loading="false">提交</el-button>
          </el-row>

        </el-form>
      </el-dialog>

      <el-dialog
        title="提示"
        :visible.sync="warnDialogShow"
        width="30%">
        <span>该数据正在被使用,删除会影响数据的正常上报。确定需要删除么?</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="warnDialogShow = false">取 消</el-button>
    <el-button type="primary" @click="handlerDeleteForWarn">确 定</el-button>
  </span>
      </el-dialog>

    </el-row>
</template>

<script>
    export default {
        name: "energyBusiness",
      data(){
          return {
            isViewShow: false,
            isViewEdit: false,
            activeName:'1',
            isShowHeader:false,
            addDialogShow:false,
            editDialogShow:false,
            warnDialogShow:false,
            isShowDelete:true,
            dataItems:[],
            itemForm:{
              name: '',
              code: ''
            },
            ruleForm:{
              id: "",
              name: "",
              code: "",
              subitems: []
            },
            rules: {
              name:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
              code:[
                { required: true, message: '请输入', trigger: 'blur' },
              ],
            },
            editDialogDatas:{
              id: "",
              parentId: "",
              name: "",
              code: ""
            },
            deleteId:'',
            deleteChildId: ''
          }
      },
      mounted(){
        let obj = this.validateGlobal.getPermission(13)
        this.isViewShow = obj.isViewShow
        this.isViewEdit = obj.isViewEdit
        this.askLists()
      },
      methods:{
        statusFormatter(row, column) {
          let status = row.isBinding;
          if(status === 0){
            return '未绑定'
          } else {
            return '已绑定'
          }
        },
        openAddDialog(){
          if (!this.addDialogShow) {
            this.addDialogShow = true
          }
          this.isShowDelete = true
          this.resetForm()
        },
        openSettingDialog(item){
          if (!this.addDialogShow) {
            this.addDialogShow = true
            this.ruleForm = this.validateGlobal.cloneObject(item)
          }
          this.isShowDelete = false
          this.itemForm.name = ''
          this.itemForm.code = ''
        },
        deleteFather(key,childkey,status){
          this.deleteId = key
          this.deleteChildId = childkey
          if (status === 0) {
            this.askDelete()
            // this.dataItems.splice(this.dataItems.findIndex(item => item.id === key), 1)
          }else {
            this.deleteId = key
            if (!this.warnDialogShow) {
              this.warnDialogShow = true
            }
          }
        },
        deleteChild(index,item){
           this.deleteFather("",item.id,item.isBinding)
        },
        addTableItems(){
          if (this.itemForm.name && this.itemForm.code) {
            this.ruleForm.subitems.push({name:this.itemForm.name,code:this.itemForm.code})
            this.$message('添加成功!');
            this.itemForm.name = ''
            this.itemForm.code = ''
          }else{
            this.$message('输入有误!');
          }
        },
        handleEditChild(index, row) {
          console.log(index, row);
          if (!this.editDialogShow) {
            this.editDialogShow = true
          }
          this.editDialogDatas = row
        },
        deleteTableItem(index, row) {
          console.log(index, row);
          this.ruleForm.subitems.splice(this.ruleForm.subitems.findIndex(item => item.code === row.code), 1)
        },
        handlerDeleteForWarn(){
          let _that = this
          this.askDelete()
          // this.dataItems.splice(this.dataItems.findIndex(item => item.id === _that.deleteId), 1)
          this.warnDialogShow = false
        },
        resetForm: function(){   // 表单重置
         /* if (this.$refs['ruleForm']!==undefined) {
            this.$refs['ruleForm'].resetFields();
          }*/
         this.ruleForm.id = ''
         this.ruleForm.name = ''
         this.ruleForm.code = ''
         this.ruleForm.subitems = []
         this.itemForm.name = ''
         this.itemForm.code = ''
        },
        handleAddSubmit: function(formName){
          let _that = this
          this.$refs[formName].validate((valid) => {
            if (valid) {
              _that.postNewDatas()
            } else {
              _that.$message('输入有误!');
              return false;
            }
          });
        },
        handlerItemSubmit: function(){
          // 验证  todo

          this.postEdit()
        },
        askLists: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.energyVarieties.business.lists
          let askData = {
            userId: userId,
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.dataItems = res.data
              if (res.data[0] && res.data[0].id) {
                _that.activeName = String(res.data[0].id)
              }
            }else{
              _that.$message('列表获取失败!');
            }
          })
        },
        postNewDatas: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.energyVarieties.business.add + "?userId=" + userId
          let askData = _that.ruleForm
          this.http.post(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('添加成功!');
              _that.addDialogShow = false
              _that.askLists()
            }else{
              _that.$message('新增失败!');
            }
          })
        },
        postEdit: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.energyVarieties.business.edit + "?userId=" + userId
          let askData = _that.editDialogDatas
          this.http.post(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('修改成功!');
              _that.editDialogShow = false
              _that.askLists()
            }else{
              _that.$message('修改失败!');
            }
          })
        },
        askDelete: function () {
          let _that = this
          let userId = sessionStorage.getItem("userId")
          let url = _that.ports.energyVarieties.business.delete
          let askData = {
            userId: userId,
            parentId:_that.deleteId,
            id:_that.deleteChildId,
          }
          this.http.get(url,askData, res => {
            if(!_that.validateGlobal.isEmpty(res) && res.code == 200){
              _that.$message('删除成功!');
              _that.editDialogShow = false
              _that.askLists()
            }else{
              _that.$message('删除失败!');
            }
          })
        }
      }
    }
</script>

<style lang="scss">
#cpts-energyBusiness{

  .el-card{
    margin: 20px 20px 0 20px;
    height: 770px;
  }
   .el-card__body{
    overflow:auto;
  }

  .evc-dialog-itemize{
    > :first-child.el-row{
      margin-top: 10px;
      margin-bottom: 20px;
    }
  }

  .evc-submit-layout{
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
